
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont">&#xf01cf;</i>
                    <div class="name">3.1范儿-选中</div>
                    <div class="code">&amp;#xf01cf;</div>
                    <div class="fontclass">.31fanerxuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf01d1;</i>
                    <div class="name">3.1购物车-选中</div>
                    <div class="code">&amp;#xf01d1;</div>
                    <div class="fontclass">.31gouwuchexuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf01d3;</i>
                    <div class="name">3.1关注-选中</div>
                    <div class="code">&amp;#xf01d3;</div>
                    <div class="fontclass">.31guanzhuxuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf01d5;</i>
                    <div class="name">3.1首页-选中</div>
                    <div class="code">&amp;#xf01d5;</div>
                    <div class="fontclass">.31shouyexuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf01f6;</i>
                    <div class="name">3.1拍摄-选中</div>
                    <div class="code">&amp;#xf01f6;</div>
                    <div class="fontclass">.31paishexuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf01b6;</i>
                    <div class="name">3.1选中</div>
                    <div class="code">&amp;#xf01b6;</div>
                    <div class="fontclass">.31xuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf01aa;</i>
                    <div class="name">3.1收藏-选中</div>
                    <div class="code">&amp;#xf01aa;</div>
                    <div class="fontclass">.31shoucangxuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0131;</i>
                    <div class="name">购物车-选中</div>
                    <div class="code">&amp;#xf0131;</div>
                    <div class="fontclass">.gouwuchexuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0115;</i>
                    <div class="name">返回1</div>
                    <div class="code">&amp;#xf0115;</div>
                    <div class="fontclass">.fanhui1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0116;</i>
                    <div class="name">返回2</div>
                    <div class="code">&amp;#xf0116;</div>
                    <div class="fontclass">.fanhui2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0101;</i>
                    <div class="name">进入店铺</div>
                    <div class="code">&amp;#xf0101;</div>
                    <div class="fontclass">.jinrudianpu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0106;</i>
                    <div class="name">微信</div>
                    <div class="code">&amp;#xf0106;</div>
                    <div class="fontclass">.weixin</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0074;</i>
                    <div class="name">分期购</div>
                    <div class="code">&amp;#xf0074;</div>
                    <div class="fontclass">.fenqigou</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0076;</i>
                    <div class="name">天猫公告</div>
                    <div class="code">&amp;#xf0076;</div>
                    <div class="fontclass">.gonggao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf005d;</i>
                    <div class="name">先试后买</div>
                    <div class="code">&amp;#xf005d;</div>
                    <div class="fontclass">.xianshihoumai</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0068;</i>
                    <div class="name">天猫提示-公告</div>
                    <div class="code">&amp;#xf0068;</div>
                    <div class="fontclass">.gonggao1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0069;</i>
                    <div class="name">天猫提示-提示</div>
                    <div class="code">&amp;#xf0069;</div>
                    <div class="fontclass">.tishi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf006a;</i>
                    <div class="name">天猫提示-提醒</div>
                    <div class="code">&amp;#xf006a;</div>
                    <div class="fontclass">.tixing</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf006d;</i>
                    <div class="name">天猫提示-疑问</div>
                    <div class="code">&amp;#xf006d;</div>
                    <div class="fontclass">.yiwen</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf006f;</i>
                    <div class="name">天猫提示-出错</div>
                    <div class="code">&amp;#xf006f;</div>
                    <div class="fontclass">.chucuo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0070;</i>
                    <div class="name">天猫提示-警示</div>
                    <div class="code">&amp;#xf0070;</div>
                    <div class="fontclass">.jingshi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0071;</i>
                    <div class="name">天猫提示-正确</div>
                    <div class="code">&amp;#xf0071;</div>
                    <div class="fontclass">.zhengque</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0072;</i>
                    <div class="name">品牌专享</div>
                    <div class="code">&amp;#xf0072;</div>
                    <div class="fontclass">.pinpaizhuanxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0050;</i>
                    <div class="name">加</div>
                    <div class="code">&amp;#xf0050;</div>
                    <div class="fontclass">.jia</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0007;</i>
                    <div class="name">直播间</div>
                    <div class="code">&amp;#xf0007;</div>
                    <div class="fontclass">.zhibojian</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x347e;</i>
                    <div class="name">充水电</div>
                    <div class="code">&amp;#x347e;</div>
                    <div class="fontclass">.chongshuidian</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3464;</i>
                    <div class="name">切换器右</div>
                    <div class="code">&amp;#x3464;</div>
                    <div class="fontclass">.qiehuanqiyou</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3465;</i>
                    <div class="name">切换器左</div>
                    <div class="code">&amp;#x3465;</div>
                    <div class="fontclass">.qiehuanqizuo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x344e;</i>
                    <div class="name">钻石</div>
                    <div class="code">&amp;#x344e;</div>
                    <div class="fontclass">.zuanshi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3434;</i>
                    <div class="name">天猫派对</div>
                    <div class="code">&amp;#x3434;</div>
                    <div class="fontclass">.tianmaopaidui</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3435;</i>
                    <div class="name">生日礼物</div>
                    <div class="code">&amp;#x3435;</div>
                    <div class="fontclass">.shengriliwu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3476;</i>
                    <div class="name">回流区价格</div>
                    <div class="code">&amp;#x3476;</div>
                    <div class="fontclass">.huiliuqujiage</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3477;</i>
                    <div class="name">回流区活动</div>
                    <div class="code">&amp;#x3477;</div>
                    <div class="fontclass">.huiliuquhuodong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3479;</i>
                    <div class="name">回流区进口食品</div>
                    <div class="code">&amp;#x3479;</div>
                    <div class="fontclass">.huiliuqujinkoushipin</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3473;</i>
                    <div class="name">电梯类目</div>
                    <div class="code">&amp;#x3473;</div>
                    <div class="fontclass">.diantileimu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0183;</i>
                    <div class="name">mine2</div>
                    <div class="code">&amp;#xf0183;</div>
                    <div class="fontclass">.mine2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0207;</i>
                    <div class="name">3.1关注1-选中</div>
                    <div class="code">&amp;#xf0207;</div>
                    <div class="fontclass">.31guanzhu1xuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0208;</i>
                    <div class="name">3.1关注1</div>
                    <div class="code">&amp;#xf0208;</div>
                    <div class="fontclass">.31guanzhu1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0215;</i>
                    <div class="name">3.1 会员</div>
                    <div class="code">&amp;#xf0215;</div>
                    <div class="fontclass">.31huiyuan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf01fd;</i>
                    <div class="name">3.1-搜索</div>
                    <div class="code">&amp;#xf01fd;</div>
                    <div class="fontclass">.31sousuo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf012b;</i>
                    <div class="name">电话</div>
                    <div class="code">&amp;#xf012b;</div>
                    <div class="fontclass">.dianhua</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0126;</i>
                    <div class="name">积分</div>
                    <div class="code">&amp;#xf0126;</div>
                    <div class="fontclass">.jifen</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf011c;</i>
                    <div class="name">天猫宝</div>
                    <div class="code">&amp;#xf011c;</div>
                    <div class="fontclass">.tianmaobao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf00f6;</i>
                    <div class="name">功能建议</div>
                    <div class="code">&amp;#xf00f6;</div>
                    <div class="fontclass">.gongnengjianyi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0113;</i>
                    <div class="name">收藏-选中</div>
                    <div class="code">&amp;#xf0113;</div>
                    <div class="fontclass">.shoucangxuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0114;</i>
                    <div class="name">收藏</div>
                    <div class="code">&amp;#xf0114;</div>
                    <div class="fontclass">.shoucang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf010b;</i>
                    <div class="name">链接</div>
                    <div class="code">&amp;#xf010b;</div>
                    <div class="fontclass">.lianjie</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf010d;</i>
                    <div class="name">点赞</div>
                    <div class="code">&amp;#xf010d;</div>
                    <div class="fontclass">.dianzan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf01ce;</i>
                    <div class="name">3.1红包</div>
                    <div class="code">&amp;#xf01ce;</div>
                    <div class="fontclass">.31hongbao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf021d;</i>
                    <div class="name">3.1 时间</div>
                    <div class="code">&amp;#xf021d;</div>
                    <div class="fontclass">.31shijian</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe735;</i>
                    <div class="name">people_fill</div>
                    <div class="code">&amp;#xe735;</div>
                    <div class="fontclass">.peoplefill</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe779;</i>
                    <div class="name">message_fill</div>
                    <div class="code">&amp;#xe779;</div>
                    <div class="fontclass">.messagefill</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe65e;</i>
                    <div class="name">time_fill</div>
                    <div class="code">&amp;#xe65e;</div>
                    <div class="fontclass">.timefill</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe666;</i>
                    <div class="name">comment_fill</div>
                    <div class="code">&amp;#xe666;</div>
                    <div class="fontclass">.commentfill</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe697;</i>
                    <div class="name">shop_fill</div>
                    <div class="code">&amp;#xe697;</div>
                    <div class="fontclass">.shopfill</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe650;</i>
                    <div class="name">location_fill</div>
                    <div class="code">&amp;#xe650;</div>
                    <div class="fontclass">.locationfill</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe792;</i>
                    <div class="name">video_fill</div>
                    <div class="code">&amp;#xe792;</div>
                    <div class="fontclass">.videofill</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe78d;</i>
                    <div class="name">emoji_fill</div>
                    <div class="code">&amp;#xe78d;</div>
                    <div class="fontclass">.emojifill</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe732;</i>
                    <div class="name">present_fill</div>
                    <div class="code">&amp;#xe732;</div>
                    <div class="fontclass">.presentfill</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe73c;</i>
                    <div class="name">attention_fill</div>
                    <div class="code">&amp;#xe73c;</div>
                    <div class="fontclass">.attentionfill</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe63f;</i>
                    <div class="name">phone</div>
                    <div class="code">&amp;#xe63f;</div>
                    <div class="fontclass">.phone</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe675;</i>
                    <div class="name">flash</div>
                    <div class="code">&amp;#xe675;</div>
                    <div class="fontclass">.flash</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe67e;</i>
                    <div class="name">delete</div>
                    <div class="code">&amp;#xe67e;</div>
                    <div class="fontclass">.delete</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe69e;</i>
                    <div class="name">LOCK</div>
                    <div class="code">&amp;#xe69e;</div>
                    <div class="fontclass">.lock</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3502;</i>
                    <div class="name">图片</div>
                    <div class="code">&amp;#x3502;</div>
                    <div class="fontclass">.tupian</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6b2;</i>
                    <div class="name">图片_填充</div>
                    <div class="code">&amp;#xe6b2;</div>
                    <div class="fontclass">.tupiantianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe678;</i>
                    <div class="name">电话_填充</div>
                    <div class="code">&amp;#xe678;</div>
                    <div class="fontclass">.dianhuatianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe674;</i>
                    <div class="name">出租车_填充</div>
                    <div class="code">&amp;#xe674;</div>
                    <div class="fontclass">.chuzuchetianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe67e;</i>
                    <div class="name">分享_填充</div>
                    <div class="code">&amp;#xe67e;</div>
                    <div class="fontclass">.fenxiangtianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe67f;</i>
                    <div class="name">更多_填充</div>
                    <div class="code">&amp;#xe67f;</div>
                    <div class="fontclass">.gengduotianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe694;</i>
                    <div class="name">搜索_填充</div>
                    <div class="code">&amp;#xe694;</div>
                    <div class="fontclass">.sousuotianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe692;</i>
                    <div class="name">首页_填充</div>
                    <div class="code">&amp;#xe692;</div>
                    <div class="fontclass">.shouyetianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe686;</i>
                    <div class="name">礼品_填充</div>
                    <div class="code">&amp;#xe686;</div>
                    <div class="fontclass">.lipintianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe68a;</i>
                    <div class="name">群组_填充</div>
                    <div class="code">&amp;#xe68a;</div>
                    <div class="fontclass">.qunzutianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe68c;</i>
                    <div class="name">删除_填充</div>
                    <div class="code">&amp;#xe68c;</div>
                    <div class="fontclass">.shanchutianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe68d;</i>
                    <div class="name">设置_填充</div>
                    <div class="code">&amp;#xe68d;</div>
                    <div class="fontclass">.shezhitianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe676;</i>
                    <div class="name">地标_填充</div>
                    <div class="code">&amp;#xe676;</div>
                    <div class="fontclass">.dibiaotianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe67c;</i>
                    <div class="name">飞机场_填充</div>
                    <div class="code">&amp;#xe67c;</div>
                    <div class="fontclass">.feijichangtianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe67b;</i>
                    <div class="name">发现_填充</div>
                    <div class="code">&amp;#xe67b;</div>
                    <div class="fontclass">.faxiantianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe67a;</i>
                    <div class="name">对话信息_填充</div>
                    <div class="code">&amp;#xe67a;</div>
                    <div class="fontclass">.duihuaxinxitianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe697;</i>
                    <div class="name">添加用户_填充</div>
                    <div class="code">&amp;#xe697;</div>
                    <div class="fontclass">.tianjiayonghutianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6a2;</i>
                    <div class="name">用户_填充</div>
                    <div class="code">&amp;#xe6a2;</div>
                    <div class="fontclass">.yonghutianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe695;</i>
                    <div class="name">提醒_填充</div>
                    <div class="code">&amp;#xe695;</div>
                    <div class="fontclass">.tixingtianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe69e;</i>
                    <div class="name">信封_填充</div>
                    <div class="code">&amp;#xe69e;</div>
                    <div class="fontclass">.xinfengtianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe69f;</i>
                    <div class="name">修改_填充</div>
                    <div class="code">&amp;#xe69f;</div>
                    <div class="fontclass">.xiugaitianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe67d;</i>
                    <div class="name">分类or广场or其他_填充</div>
                    <div class="code">&amp;#xe67d;</div>
                    <div class="fontclass">.fenleiorguangchangorqitatianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe670;</i>
                    <div class="name">安全_填充</div>
                    <div class="code">&amp;#xe670;</div>
                    <div class="fontclass">.anquantianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6a4;</i>
                    <div class="name">赞_填充</div>
                    <div class="code">&amp;#xe6a4;</div>
                    <div class="fontclass">.zantianchong</div>
                </li>
            
        </ul>


        <div class="helps">
            第一步：使用font-face声明字体
            <pre>
@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
</pre>
第二步：定义使用iconfont的样式
            <pre>
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
</pre>
第三步：挑选相应图标并获取字体编码，应用于页面
<pre>
&lt;i class="iconfont"&gt;&amp;#x33;&lt;/i&gt;
</pre>
        </div>

    </div>
</body>
</html>
